import React, { useState, useRef } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect } from 'umi'
import { queryBulletinList,saveBulletinInfo,deleteBulletinById} from '../service'
import { Tooltip,Divider,message,Popconfirm,Switch,Button,notification,Tabs} from 'antd'
import AddForm from './components/AddForm'
import {bulletinTypeList} from "@/utils/constant";
import moment from 'moment'
const  { TabPane } = Tabs;

const TableList = () => {
  const actionRef = useRef();
  const actionRef2 = useRef();
  const [visible, setVisible] = useState(null);
  const [record,setRecord] = useState(null);
  const [loading,setLoading] = useState(false);
  const [tabIndex, setTabIndex] = useState("1");
  const [typeValue,setTypeValue] = useState(null);

  const handleCancel = () => {
    setVisible(false);
    setRecord(null)
  };

  const handleSubmit = (values) => {
    setLoading(true);
    saveBulletinInfo(values).then((res) => {
      if(res.flag){
        message.success('操作成功！');
        handleCancel()
        actionRef.current && actionRef.current.reload()
        actionRef2.current && actionRef2.current.reload();
      }else{
        notification.error({
          message: `请求错误 ${res.status}`,
          description: res.error,
        });
      }
      setLoading(false)
    })
  };

  const updateBulletin = (record,value) =>{
    setVisible(true)
    setTypeValue(value)
    if(record){
      setRecord(record)
    }
  }

  const delBulletin = (id) =>{
    deleteBulletinById(id).then(res => {
      if(res.flag){
        message.success('删除成功！');
        actionRef.current.reload()
      }else{
        message.error(res.error)
      }
    })
  }

  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '公告标题',
      dataIndex: 'title',
    },
    {
      title: '公告副标题',
      dataIndex: 'subtitle',
    },
    {
      title: '公告类型',
      dataIndex: 'type',
      hideInSearch: true,
      render: (text) =>{
        const res = bulletinTypeList.find((item) => item.value === parseInt(text));
        return res ? res.label : text
      }
    },
    {
      title: '公告内容',
      dataIndex: 'content',
      hideInSearch: true,
      onCell: ()=>{
        return {
          style:{
            maxWidth:200,
            overflow:'hidden',
            whiteSpace:'nowrap',
            textOverflow:'ellipsis',
            cursor:'pointer',
          }
        }
      },
      render: (text) =>{
        return <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
      }
    },
    {
      title: '发布时间',
      dataIndex: 'time',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD HH:mm') : ''
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      hideInSearch: true,
      render: (text) => {
        return text ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '创建人',
      dataIndex: 'createName',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: '10%',
      render: (item, record) => (
        <>
          <a onClick={() => updateBulletin(record,parseInt(record.type))}>修改</a>
          <Divider type="vertical"/>
          <Popconfirm title={`是否确认删除?`}
                      onConfirm={() => delBulletin(record.id)}
                      okText="是" cancelText="否">
            <a>删除</a>
          </Popconfirm>
        </>
      ),
    },
  ]

  const handleChangTabIndex = (key) => {
    setTabIndex(key)
    if(key === '1'){
      actionRef.current &&  actionRef.current.reload();
    }else{
      actionRef2.current && actionRef2.current.reload();
    }
  }

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="1" onChange={handleChangTabIndex}>
        <TabPane tab="系统公告" key="1">
          <ProTable
            actionRef={actionRef}
            rowKey="id"
            request={(params) => queryBulletinList(params,tabIndex)}
            columns={columns}
            toolBarRender={(action, { selectedRows }) => [
              <Button type="primary" onClick={() => updateBulletin(null,1)}>新建</Button>,
            ]}
          />
        </TabPane>
        <TabPane tab="公司公告" key="2">
          <ProTable
            actionRef={actionRef2}
            rowKey="id"
            request={(params) => queryBulletinList(params,tabIndex)}
            columns={columns}
            toolBarRender={(action, { selectedRows }) => [
              <Button type="primary" onClick={() => updateBulletin(null,2)}>新建</Button>,
            ]}
          />
        </TabPane>
      </Tabs>
      <AddForm
        record={record}
        loading={loading}
        typeValue={typeValue}
        visible={visible}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />
    </PageHeaderWrapper>
  )
}

export default connect(() => ({
}))(TableList)
